<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下载HTML2Canvas库文件</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        h1 {
            color: #3182ce;
        }
        pre {
            background-color: #f5f5f5;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
        }
        .button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3182ce;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            margin: 10px 0;
        }
        .button:hover {
            background-color: #2c5282;
        }
        .note {
            background-color: #fff8dc;
            padding: 10px;
            border-left: 4px solid #ffd700;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <h1>下载HTML2Canvas库</h1>
    
    <p>如果您的网络无法连接到CDN服务器，可以使用此页面下载HTML2Canvas库并保存到本地。</p>
    
    <div class="note">
        <strong>注意：</strong> 下载完成后，请将文件保存为 <code>html2canvas.min.js</code> 并放置在与 index.html 同级的 js 目录下。
    </div>
    
    <p>
        <a class="button" href="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js" download="html2canvas.min.js">
            下载HTML2Canvas库
        </a>
    </p>
    
    <h2>手动使用方法：</h2>
    
    <p>1. 如果上面的按钮不起作用，请复制以下链接到浏览器地址栏：</p>
    <pre>https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js</pre>
    
    <p>2. 另存为 <code>html2canvas.min.js</code> 到本地计算机</p>
    
    <p>3. 创建 <code>js</code> 文件夹（如果不存在）</p>
    
    <p>4. 将下载的文件放入 <code>js</code> 文件夹</p>
    
    <p>5. 修改 <code>index.html</code> 文件，将：</p>
    <pre>&lt;script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"&gt;&lt;/script&gt;</pre>
    
    <p>替换为：</p>
    <pre>&lt;script src="js/html2canvas.min.js"&gt;&lt;/script&gt;</pre>
    
    <h2>确认HTML2Canvas工作正常</h2>
    <p>打开浏览器控制台，检查是否有"HTML2Canvas库已成功加载"的消息。如果没有看到此消息或出现错误，说明库未正确加载。</p>
    
    <div class="note">
        <p><strong>技术说明：</strong> 保存为图片功能失败通常与以下原因有关：</p>
        <ol>
            <li>HTML2Canvas库未正确加载</li>
            <li>使用了跨域图像资源导致画布被污染</li>
            <li>浏览器安全限制（尤其是在本地文件系统中打开页面时）</li>
        </ol>
        <p>我们的改进包括将队伍徽标暂时替换为纯文本版本，这样可以避免跨域资源问题。</p>
    </div>
</body>
</html> 